<template>
  <div style="background: bg-bg_color" class="p-2">
    <div class="p-3 !rounded-lg bg-white">
      <el-form
        ref="formRef"
        :inline="true"
        :model="formInline"
        class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
      >
        <el-form-item label="关键字">
          <el-input
            v-model="formInline.user"
            placeholder="搜索用户名，邮箱，手机号"
            style="width: 240px"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="formInline.status"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="等级">
          <el-select
            v-model="formInline.grade"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option
              v-for="item in gradeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="p-5 mt-6 !rounded-lg bg-white">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
      >
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="createTime" label="注册时间" />
        <el-table-column prop="pet" label="宠物">
          <template #default="{ row }">
            <div class="flex items-center space-x-1">
              <img
                v-for="(item, index) in row.petList"
                :key="index"
                :src="item.img"
                class="w-6 h-6 !rounded-full"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="会员等级">
          <template #default="scope">
            <span
              v-if="scope.row.grade == 1"
              class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-50 !rounded-full"
              >普通会员</span
            >
            <span
              v-if="scope.row.grade == 2"
              class="px-2 py-1 text-xs font-medium text-purple-700 bg-purple-50 !rounded-full"
              >钻石会员</span
            >
            <span
              v-if="scope.row.grade == 3"
              class="px-2 py-1 text-xs font-medium text-yellow-700 bg-yellow-50 !rounded-full"
              >黄金会员</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <span
              v-if="scope.row.status == 1"
              class="px-2 py-1 text-xs font-medium text-green-700 bg-green-50 !rounded-full"
              >正常</span
            >
            <span
              v-if="scope.row.status == 2"
              class="px-2 py-1 text-xs font-medium text-gray-700 bg-gray-50 !rounded-full"
              >已禁用</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="250">
          <template #default="scope">
            <div class="flex">
              <span
                class="pr-3 text-sm text-primary hover:text-primary-dark whitespace-nowrap !rounded-button"
                @click="onDetail(scope.row)"
                >查看详情</span
              >
              <span
                class="pr-3 text-sm text-gray-500 hover:text-gray-700 whitespace-nowrap !rounded-button"
                @click="onEdit(scope.row)"
                >编辑用户</span
              >
              <span
                v-if="scope.row.status == 1"
                class="pr-3 text-sm text-red-500 hover:text-red-700 whitespace-nowrap !rounded-button"
                @click="onState('0')"
                >禁用</span
              >
              <span
                v-if="scope.row.status == 2"
                class="pr-3 text-sm text-green-500 hover:text-green-700 whitespace-nowrap !rounded-button"
                @click="onState('1')"
                >启用</span
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pt-5 pr-2 pb-2" style="display: flex; justify-content: right">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 详情 -->
    <Detail v-if="isDetail" :open="isDetail" @detailChange="detailChange" />
    <!-- 编辑 -->
    <Edit v-if="isEdit" :open="isEdit" @editChange="editChange" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import Detail from "./detail.vue"; // 详情
import Edit from "./edit.vue"; // 编辑
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
// 表格数据
const tableData = reactive([
  {
    name: "王鸿运",
    img: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    email: "18734770923@163.com",
    phone: "18734770923",
    grade: "1",
    status: "1",
    createTime: "2025-01-01",
    petList: [
      {
        name: "王鸿运",
        petName: "软软",
        variety: "田园猫",
        age: "6",
        img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      },
      {
        name: "王鸿运",
        petName: "西西",
        variety: "奶牛猫",
        age: "2.5",
        img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      },
      {
        name: "王鸿运",
        petName: "六六",
        variety: "高地",
        age: "2",
        img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      }
    ]
  },
  {
    name: "王鸿运",
    img: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    email: "18734770923@163.com",
    phone: "18734770923",
    grade: "2",
    status: "2",
    createTime: "2025-01-01",
    petList: [
      {
        name: "王鸿运",
        petName: "软软",
        variety: "田园猫",
        age: "6",
        img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      }
    ]
  },
  {
    name: "王鸿运",
    img: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    email: "18734770923@163.com",
    phone: "18734770923",
    grade: "3",
    status: "2",
    createTime: "2025-01-01",
    petList: [
      {
        name: "王鸿运",
        petName: "西西",
        variety: "奶牛猫",
        age: "2.5",
        img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      },
      {
        name: "王鸿运",
        petName: "六六",
        variety: "高地",
        age: "2",
        img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      }
    ]
  }
]);
// 查询条件
const formInline = ref<any>({
  user: "",
  status: "",
  grade: ""
});
// 状态数据
const statusOptions = reactive([
  {
    value: "1",
    label: "正常"
  },
  {
    value: "2",
    label: "禁用"
  },
  {
    value: "3",
    label: "取消"
  }
]);
// 会员等级
const gradeOptions = reactive<any>([
  {
    value: "1",
    label: "普通会员"
  },
  {
    value: "2",
    label: "黄金会员"
  },
  {
    value: "3",
    label: "钻石会员"
  }
]);
// 查询
const onSubmit = () => {
  console.log("submit!");
};
// 重置
const onReset = () => {
  formInline.value = {
    user: "",
    status: "",
    grade: ""
  };
};
// 查看详情
const isDetail = ref(false);
// 编辑用户
const isEdit = ref(false);

// 详情
const onDetail = (row: any) => {
  isDetail.value = true;
};
// 详情返回
const detailChange = e => {
  isDetail.value = e;
};
// 编辑
const onEdit = (row: any) => {
  console.log(row, "row");
  isEdit.value = true;
};
// 编辑返回
const editChange = e => {
  console.log(e, "eee");
  isEdit.value = e;
};
// 是否禁用
const onState = e => {
  console.log(e, "e");
  let text = e == 0 ? "禁用" : "启用";
  ElMessageBox.alert(`您是否${text}该用户吗？`, "提示", {
    confirmButtonText: "OK",
    callback: (action: Action) => {
      ElMessage({
        type: "success",
        message: "操作成功"
      });
      onSubmit();
    }
  });
};
// 默认调用
onMounted(() => {
  onSubmit();
});
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
